<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="donuts.css" />
<script>
	function updateOrder(){
		const TAXRATE = 0.0925;
        const DONUTPRICE = 0.50;
        
        var numCakeDonut = parseDonut(document.getElementById("cakedonuts").value);
        var numGlazeDonus = parseDonut(document.getElementById("glazeddonuts").value);
        
        if(isNaN(numCakeDonut)) numCakeDonut=0;
        if(isNaN(numGlazeDonus)) numGlazeDonus=0;
        
        var subtotal = (numCakeDonut + numGlazeDonus)*DONUTPRICE;
        var tax = subtotal * TAXRATE;
        var total = subtotal + tax;
        
        document.getElementById("subtotal").value = subtotal.toFixed(2);
        document.getElementById("tax").value = tax.toFixed(2);
        document.getElementById("total").value = total.toFixed(2);
	}
	
	function placeOrder(){
		alert("submit to server");
	}
	
	function parseDonut(donut){
		var num = parseInt(donut);
		if(donut.indexOf("dozen")!= -1){
			num *=12;
		}
		return num;
	}
	
</script>
</head>
 <body>
    <div id="frame">
      <div class="heading">Duncan's Just-In-Time Donuts</div>
      <div class="subheading">All donuts 50 cents each, cake or glazed!</div>
      <div id="left">
        <img src="donuttime.png" alt="Just-In-Time Donuts" />
      </div>
      <form name="orderform" action="donuts.php" method="POST">
        <div class="field">
          Name: <input type="text" id="name" name="name" value="" />
        </div>
        <div class="field">
        # of cake donuts: <input type="text" id="cakedonuts" name="cakedonuts" value=""
          onchange="updateOrder();" />
        </div>
        <div class="field">
        # of glazed donuts: <input type="text" id="glazeddonuts" name="glazeddonuts" value=""
          onchange="updateOrder();" />
        </div>
        <div class="field">
        Minutes 'til pickup: <input type="text" id="pickupminutes" name="pickupminutes" value="" />
        </div>
        <div class="field">
        Subtotal: <input type="text" id="subtotal" name="subtotal" value="" readonly="readonly" />
        </div>
        <div class="field">
        Tax: <input type="text" id="tax" name="tax" value="" readonly="readonly" />
        </div>
        <div class="field">
        Total: <input type="text" id="total" name="total" value="" readonly="readonly" />
        </div>
        <div class="field">
        <input type="button" value="Place Order" onclick="placeOrder(this.form);" />
        </div>
      </form>
    </div>
  </body>
</html>